<%@ include file="../common/IncludeTop.jsp"%>
<link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
	  media="screen" />
<div id="BackLink">
	<a href="viewProduct?productId=${sessionScope.product.productId}">Return to ${sessionScope.product.productId}</a>
</div>
<style type="text/css">

	table {
		width: 700px;
		padding: 0;
		margin: 0;
	}

	caption {
		padding: 0 0 5px 0;
		width: 700px;
		font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		text-align: right;
	}

	th {
		font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		color: #4f6b72;
		border-right: 1px solid #C1DAD7;
		border-bottom: 1px solid #C1DAD7;
		border-top: 1px solid #C1DAD7;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: left;
		padding: 6px 6px 6px 12px;
		background: #d5eaca no-repeat;
	}

	th.nobg {
		border-top: 0;
		border-left: 0;
		border-right: 1px solid #C1DAD7;
		background: none;
	}

	td {
		border-right: 1px solid #C1DAD7;
		border-bottom: 1px solid #C1DAD7;
		background: #8FBC8F;
		font-size:16px;
		padding: 6px 6px 6px 12px;
		color: 	#F5FFFA;
	}


	td.alt {
		background: #F5FAFA;
		color: #797268;
	}

	th.spec {
		border-left: 1px solid #C1DAD7;
		border-top: 0;
		background: #fff no-repeat;
		font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	}

	th.specalt {
		border-left: 1px solid #C1DAD7;
		border-top: 0;
		background: #f5fafa no-repeat;
		font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		color: #797268;
	}
</style>
<style>

	body{
		background: #8FBC8F  ;
	}

	.button{
		cursor: pointer;
		width: 180px;
		line-height: 38px;
		text-align: center;
		font-weight: bold;
		color: #fff;
		text-shadow:1px 1px 1px #333;
		border-radius: 5px;
		margin:0 20px 20px 0;
		position: relative;
		overflow: hidden;
	}
	.button:nth-child(6n){
		margin-right: 0;
	}
	.button.green{
		border:1px solid #64c878;
		box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
		background: -webkit-linear-gradient(top,#90dfa2,#84d494);
		background: -moz-linear-gradient(top,#90dfa2,#84d494);
		background: linear-gradient(top,#90dfa2,#84d494);
	}
	.green:hover{
		background: -webkit-linear-gradient(top,#aaebb9,#82d392);
		background: -moz-linear-gradient(top,#aaebb9,#82d392);
		background: linear-gradient(top,#aaebb9,#82d392);
	} .green:active{
		  top:1px;
		  box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
		  background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
		  background: -moz-linear-gradient(top,#5eac6e,#72b37e);
		  background: linear-gradient(top,#5eac6e,#72b37e);
	  }


	.okTips{
		color:green;
	}
	.errorTips{
		color:red;
	}
</style>
<div id="Catalog">

<table  class="imagetable">
	<tr>
		<td>${sessionScope.product.description}</td>
	</tr>
	<tr>
		<td><b> ${sessionScope.item.itemId} </b></td>
	</tr>
	<tr>
		<td><b><font size="4"> ${sessionScope.item.attribute1}
		${sessionScope.item.attribute2} ${sessionScope.item.attribute3}
		${sessionScope.item.attribute4} ${sessionScope.item.attribute5}
		${sessionScope.product.name} </font></b></td>
	</tr>
	<tr>
		<td>${sessionScope.product.name}</td>
	</tr>
	<tr>
		<td><c:if test="${sessionScope.item.quantity <= 0}">
        Back ordered.
      </c:if> <c:if test="${sessionScope.item.quantity > 0}">
      	${sessionScope.item.quantity} in stock.
	  </c:if></td>
	</tr>
	<tr>
		<td><fmt:formatNumber value="${sessionScope.item.listPrice}"
			pattern="$#,##0.00" /></td>
	</tr>

	<tr>
		<td>
			<a class="button green"  href="addItemToCart?itemId=${sessionScope.item.itemId}">Add to Cart</a>
		</td>
	</tr>
</table>
	<style type="text/css">
		#Menu,#Logo,#Search{
			background-color:			#F5FFFA;
		}
	</style>
	<style type="text/css">
		#QuickLinks{
			background-color:	#8FBC8F;
		}
	</style>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>



